<template>
	<v-dialog v-model="visible" width="800px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}角色</div>
			</v-card-text>
			<v-card-text>
				<v-form @submit.prevent.stop.="onSave" ref="form">
					<v-text-field label="名称" v-model="form.name" :rules="rules.name"/>
					<v-text-field label="显示名称" v-model="form.displayName" :rules="rules.displayName"/>
					<v-switch label="是否默认" v-model="form.isDefault" :rules="rules.isDefault"/>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">取消</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import MdDialogMixins from '@/common/mixins/MdDialogMixins';
import RoleApi from '@/common/api/RoleApi';

export default {
	name: 'UserDialog',
	mixins: [MdDialogMixins],
	data() {
		return {
			rules: {
				name: this.$utils.formValidator(['required', 'string', 'max:64', 'min:2', 'alpha_num']),
				displayName: this.$utils.formValidator(['required', 'string', 'max:64', 'min:2']),
				isDefault: this.$utils.formValidator(['required', 'boolean'])
			}
		}
	},
	methods: {
		onSave() {
			if (!this.$refs.form.validate()) {
				return;
			}
			this.confirmLoading = true;
			let api = this.form.id ? RoleApi.update(this.form.id, this.form) : RoleApi.create(this.form)
			api.then(res => {
				this.$utils.responseHandler(res).then(() => {
					this.visible = false;
					this.$emit('success');
				})
			}).finally(() => this.confirmLoading = false)
		},
		add() {
			this.action({isDefault: false, canDelete: true}, 'add')
		},
		edit(data) {
			this.action(data, 'edit')
		}
	}
}
</script>

<style scoped>

</style>